<template>
    <div class="salePersonalCenter">
        <image class="setting" :src="imgPath('fan.png')" @click="jumpTo('/account/accountSetting')"></image>
        <image class="notice" :src="imgPath('fan.png')"></image>
        <scroller class="scroll" show-scrollbar="false">
            <div class="info-wrapper">
                <image class="info-bg" :src="imgPath('pic_66.png')"></image>
                <div class="user-wrapper">
                    <image class="avatar" :src="imgPath('printer.png')"></image>
                    <text class="username">啦啦啦啦</text>
                </div>
            </div>
            <div class="center-wrapper flex_row">
                <div class="task-wrapper">
                    <text class="title border-bottom-cecece">任务订单</text>
                    <div class="task-list flex_row">
                        <div class="taskStep flex_row">
                            <div class="step-item ">
                                <image class="step-icon" :src="imgPath('create_active.png')"></image>
                                <text class="step-word">已完成</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item ">
                                <image class="step-icon" :src="imgPath('create_active.png')"></image>
                                <text class="step-word">已完成</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item ">
                                <image class="step-icon" :src="imgPath('create_active.png')"></image>
                                <text class="step-word">已完成</text>
                            </div>
                        </div>
                        <div class="step-item allOrder ">
                            <image class="step-icon" :src="imgPath('create.png')"></image>
                            <text class="step-word">全部订单</text>
                        </div>
                    </div>
                </div>
                <div class="function-list">
                    <div class="function-item flex_row border-bottom-cecece item_height" v-for="(item, index) in functionList" :key="index"
                         @click="jumpTo(item.path)">
                        <image class="item-icon" :src="imgPath(item.icon)"></image>
                        <text class="item-name">{{item.name}}</text>
                        <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                    </div>
                    <div class="function-item flex_row item_height" @click="callService">
                        <image class="item-icon" :src="imgPath('temp_worker.png')"></image>
                        <text class="item-name">联系客服</text>
                        <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                    </div>
                </div>
            </div>
        </scroller>
        <NavBottom></NavBottom>
    </div>
</template>

<script>
import NavBottom from '@/components/navBottom'
import Dialog from '@/components/dialog'
import Nat from 'natjs'
const modal = weex.requireModule('modal')
export default {
  name: 'salePersonalCenter',
  data () {
    return {
      showDialog: false, // 显示对话框
      functionList: [ // 功能列表
        {
          icon: 'temp_worker.png',
          name: '商城订单',
          path: '/myorder/saleStoreOrder'
        },
        {
          icon: 'temp_worker.png',
          name: '我的商城',
          path: '/store/saleStore'
        },
        {
          icon: 'temp_worker.png',
          name: '我的收藏',
          path: '/mine/myCollection'
        },
        {
          icon: 'temp_worker.png',
          name: '我的浏览',
          path: '/mine/myView'
        },
        {
          icon: 'temp_worker.png',
          name: '我的银行卡',
          path: ''
        },
        {
          icon: 'temp_worker.png',
          name: '发票管理',
          path: '/invoice/invoice'
        }
      ],
      stepList: [
        {
          icon: 'create',
          name: '已接单'
        },
        {
          icon: 'editor',
          name: '任务中'
        },
        {
          icon: 'authenticate',
          name: '已完成'
        }
      ]
    }
  },
  methods: {
    jumpTo (path) { // 路由跳转
      if (!path) {
        modal.toast({
          message: '该功能暂未开放',
          duration: 3
        })
        return
      }
      this.$router.push(path)
    },
    callService () { // 联系客服
      this.showDialog = true
      Nat.call('415-736-0000')
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    }
  },
  components: {
    NavBottom,
    Dialog
  }
}
</script>

<style scoped>
    .item_height {
        height: 100px;
        line-height: 100px;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235,235,235);
    }
    .flex_row {
        flex-direction: row;
    }
    .personalCenter-wrapper {
        background-color: #f5f5f5;
    }
    .scroll {
        padding-bottom: 130px;
    }
    .info-wrapper {
        height: 416px;
        /*padding-top: 72px;*/
        /*padding-bottom: 48px;*/
        /*background-color: #2C2E36;*/
    }
    .info-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 416px;
    }
    .setting {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
    }
    .notice {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    .user-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 416px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .avatar {
        width: 200px;
        height: 200px;
        margin-top: 110px;
        margin-bottom: 24px;
        border-radius: 60px;
    }
    .username {
        width: 750px;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .center-wrapper {
        flex-wrap: wrap;
        padding-left: 24px;
        padding-right: 24px;
    }
    .task-wrapper {
        width: 702px;
        margin-top: 24px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0px 1px 10px 0px rgba(43,48,64,0.12);
    }
    .title {
        padding-left: 24px;
        padding-right: 24px;
        font-size: 28px;
        font-weight: bold;
        line-height: 88px;
    }
    .task-list {
        height: 158px;
        padding-left: 40px;
        justify-content: space-between;
    }
    .taskStep {
        width: 450px;
        flex-wrap: wrap;
        padding-top: 22px;
        justify-content: space-between;
        align-items: end
    }
    .step-item {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }
    .step-icon {
        width: 68px;
        height: 68px;
    }
    .line {
        width: 90px;
        height: 1px;
        margin-top: 32px;
        background-color: #fecb01;
    }
    .step-word {
        /*width: 90px;*/
        margin-top: 12px;
        font-size: 26px;
        color: #464646;
    }
    .function-list {
        width: 702px;
        margin-top: 24px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        /*border-width: 1px;*/
        /*border-style: solid;*/
        /*border-color: #545c72;*/
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 1px 10px 0px rgba(43,48,64,0.12);
    }
    .function-item {
        align-items: center;
    }
    .item-icon {
        width: 44px;
        height: 44px;
        margin-right: 24px;
    }
    .item-name {
        flex: 1;
        font-size: 28px;
        color: #545c72;
    }
    .arrow_right {
        width: 24px;
        height: 36px;
        margin-left: 24px;
    }
    .allOrder{
        width: 190px;
        justify-content: center;
        align-items: center;
        /*box-shadow: 0px 1px 10px 0px rgba(43,48,64,0.12);*/
        border-left-color:rgb(235,235,235);
        border-left-style: solid;
        border-left-width: 1px;
        background-color: #fff;
    }
</style>
